<template>
  <view class="nition" @click="goDetail(detail)">
    <view class="icon">
      <image :src="setUrl(detail.thumb)" mode="aspectFill" class="img"></image>
      <view class="overlay"></view>
      <view class="time">{{ formatTimeData(detail.start_at) }}</view>
    </view>
    <view class="title">{{ detail.title }}</view>
    <view class="order">
      <view class="center">
        <view class="price" v-if="!detail.is_free">{{ detail.price }}投研币</view>
        <view class="price" v-else>免费</view>
        <!-- <view class="sign" v-if="topCurrent == 0">报名</view> -->
      </view>
      <view class="tag">
        <view class="test">{{ typeList[detail.join_permission] }}</view>
        <template v-if="detail.tagList && detail.tagList.length">
          <view class="test" v-for="(detail, index) in detail.tagList" :key="index">{{ detail.name }}</view>
        </template>
      </view>
    </view>
  </view>
</template>

<script setup>
import { setUrl, formatTimeData } from '@/common';
const typeList = {
  1: '专场',
  2: '机构',
  3: '公开'
}
const props = defineProps({
  detail: {
    type: Object,
    default: () => {}
  }
})

function goDetail(row){
  uni.navigateTo({
    url: `/pages/research/liveDetail?id=${row.id}`
  });
}
</script>

<style lang="scss" scoped>
  .nition{
    width: 49%;
    height: 500rpx;
    border: 1rpx solid #E9E9E9;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    overflow: hidden;
    position: relative;
    .order{
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      padding: 14rpx;
      padding-top: 0;
      .tag{
        padding-top: 14rpx;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        .test{
          height: 44rpx;
          line-height: 44rpx;
          border-radius: 44rpx;
          padding: 0 20rpx;
          background: #94949414;
          font-weight: 400;
          font-size: 24rpx;
          color: #000000;
          margin-right: 8rpx;
          margin-bottom: 8rpx;
          text-align: center;
        }
      }
      .center{
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding-top: 14rpx;
        .sign{
          width: 118rpx;
          height: 44rpx;
          line-height: 44rpx;
          background-color: #ff484514;
          border-radius: 7rpx;
          border: 1px solid #FF3B38;
          font-weight: 500;
          font-size: 26rpx;
          color: #FF3B38;
          text-align: center;
        }
        .price{
          font-weight: 500;
          font-size: 26rpx;
          color: #FF3532;
        }
      }
    }
    .title{
      width: 100%;
      font-weight: 500;
      font-size: 26rpx;
      color: #000000;
      padding: 0 14rpx;
      margin-top: 14rpx;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    .icon{
      height: 205rpx;
      width: 100%;
      position: relative;
      overflow: hidden;
      .time{
        font-weight: 500;
        font-size: 26rpx;
        color: #FFFFFF;
        position: absolute;
        left: 0;
        bottom: 0;
        padding: 0 16rpx;
        padding-bottom: 16rpx;
        width: 100%;
        z-index: 3;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .overlay{
        position: absolute;
        left: 0;
        top: 0;
        z-index: 2;
        width: 100%;
        height: 100%;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.63) 0%, rgba(0, 0, 0, 0) 100%);
      }
    }
  }
</style>